﻿<template>
  <el-dialog v-drag :title = 'dialogUserTitle' :visible.sync = 'dialogUserVisible' width = "45%"
  :show-close = 'false'  :close-on-click-modal = 'false' :close-on-press-escape = 'false' append-to-body>
    <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth'>
      <el-form-item label = "选择人员：" prop = 'urserList'>
        <el-select v-model = 'ruleForm.urserList' placeholder = "选择需要驳回的人员" multiple collapse-tags>
          <el-option v-for = '(item, index) in allUsers' :key = 'index' :label = 'item.Name' :value = 'item.UserID'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = "info" @click = "resetForm">取 消</el-button>
        <el-button type = "primary" @click = "submitForm">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['showUserDialog', 'PrimaryKey', 'NodeID'],
  data () {
    return {
      dialogUserTitle: '选择需要驳回的人员',
      dialogUserVisible: false,
      userLoading: false,
      userLoadingText: '数据加载中',
      // 选人的表单部分
      labelWidth: '86px',
      ruleForm: {
        urserList: []
      },
      allUsers: []
    }
  },
  methods: {
    initPage () {
      this.allUsers = []
      this.ruleForm.urserList = []
      this.getAllUsers()
    },
    // 获取所有的团队成员
    getAllUsers () {
      this.userLoading = true
      this.$workflowPost('/WorkFlowEngine/PreNodeUsers', {
        PrimaryKey: this.PrimaryKey,
        NodeID: this.NodeID
      }).then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.allUsers = dataResult.data
          // 判断是否有可以选人员
          if (this.allUsers.length) {
            // 当只有一个人时，不需要选择，直接执行下一步操作
            if (this.allUsers.length === 1) {
              this.$emit('choosedUsersSuccess', this.allUsers)
            }
          } else {
            // 当没有人时
            this.$message({
              message: '没有获取到下一步的执行人员，请检查接口或流程是否有误',
              type: 'error'
            })
          }
        } else if (dataResult.code === 'failed') {
          this.userLoading = false
          this.$message({
            message: dataResult.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        this.userLoading = false
        this.$message({
          message: error,
          type: 'error'
        })
      })
    },
    // 点击取消按钮
    resetForm () {
      this.$confirm('确定要放弃驳回操作么？', '提示', {
        showClose: false,
        showCancelButton: true,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        CancelButtonText: '取消',
        cancelButtonClass: 'el-button--info',
        confirmButtonText: '确定'
      }).then(() => {
        this.$emit('giveUpChooseUser')
      }).catch(() => {})
    },
    // 点击确定按钮时
    submitForm () {
      if (this.ruleForm.urserList.length) {
        let choosedUsers = []
        this.ruleForm.urserList.forEach(item => {
          for (let i = 0; i < this.allUsers.length; i++) {
            if (item === this.allUsers[i].UserID) {
              let obj = {
                UserID: this.allUsers[i].UserID,
                Name: this.allUsers[i].Name
              }
              choosedUsers.push(obj)
              break
            }
          }
        })
        this.$emit('choosedUsersSuccess', choosedUsers)
      } else {
        this.$message({
          message: '请选择需要驳回的人员',
          type: 'warning'
        })
      }
    }
  },
  watch: {
    // 监听选人弹窗打开的方法
    showUserDialog: {
      handler: function (val, oldVal) {
        this.dialogUserVisible = val
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  }
}
</script>
